<!--
 * @Author: your name
 * @Date: 2021-09-09 20:49:27
 * @LastEditTime: 2021-09-13 13:52:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \backstage-management-system\system\src\views\admin\index.vue
-->
<template>
  <div class="layout" :class="{ 'layout-hide-text': spanLeft < 5 }">
    <Row type="flex">
      <i-col :span="spanLeft" class="layout-menu-left">
        <Menu active-name="1" theme="dark" width="auto">
          <div class="layout-logo-left">
            <img src="../../assets/logo.jpg" alt="" />
          </div>
          <Menu-item name="1">
            <p class="layout-text" @click="$router.push('/admin/welcome')">
              首页
            </p>
          </Menu-item>
          <Menu-item name="2">
            <p class="layout-text" @click="$router.push('/admin/pm')">
              项目管理
            </p>
          </Menu-item>
          <Menu-item name="3">
            <p class="layout-text" @click="$router.push('/admin/money')">
              费用管理
            </p>
          </Menu-item>
          <Menu-item name="4">
            <p class="layout-text" @click="$router.push('/admin/meal')">
              订餐管理
            </p>
          </Menu-item>
          <Menu-item name="5">
            <p class="layout-text" @click="$router.push('/admin/cont')">
              合同管理
            </p>
          </Menu-item>
          <Menu-item name="6">
            <p class="layout-text" @click="$router.push('/admin/talent')">
              人才管理
            </p>
          </Menu-item>
        </Menu>
      </i-col>
      <i-col :span="spanRight">
        <div class="layout-header">
          <div class="shouye">
            <i style="font-size: 25px" class="el-icon-s-fold"></i> &nbsp; 首页
          </div>
          <div class="yonghu">
            琦玉 &nbsp;&nbsp;欢迎来到综合管理平台
            <span class="out" @click="remove">退出登录</span>
          </div>
        </div>
        <router-view></router-view>
      </i-col>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spanLeft: 5,
      spanRight: 19,
      isRouterAlive: true
    };
  },
  computed: {
    iconSize() {
      return this.spanLeft === 5 ? 14 : 24;
    },
  },
  methods: {
    toggleClick() {
      if (this.spanLeft === 5) {
        this.spanLeft = 2;
        this.spanRight = 22;
      } else {
        this.spanLeft = 5;
        this.spanRight = 19;
      }
    },
    remove() {
      this.$store.commit("cont/logout");
      this.$router.replace("/login").catch(() => {});
    },
  },
};
</script>

<style scoped>
.yonghu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 350px;
}
.out {
  font-size: 12px;
  color: rgb(110, 142, 181);
  cursor: pointer;
}
.out:hover {
  text-decoration: underline;
}
.shouye {
  display: flex;
  align-items: center;
}
.layout {
  border: 1px solid #d7dde4;
  background: #fff;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-breadcrumb {
  padding: 10px 15px 0;
}
.layout-content {
  min-height: 76vh;
  margin: 15px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
}
.layout-content-main {
  padding: 10px;
}
.layout-copy {
  text-align: center;
  padding: 10px 0 20px;
  color: #9ea7b4;
}
.layout-menu-left {
  background: #464c5b;
  min-height: 99vh;
}
.layout-header {
  font-size: 14px;
  height: 60px;
  background-color: rgba(242, 242, 242, 1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 15px;
  padding: 0px 30px;
  width: 1353px;
}
.layout-logo-left {
  width: 196px;
  height: 100px;
  background: #5b6270;
  border-radius: 3px;
  margin: 0px auto;
}
.layout-logo-left > img {
  width: 100%;
  height: 100%;
}
.layout-ceiling-main a {
  color: #9ba7b5;
}
.layout-hide-text .layout-text {
  display: none;
  margin-bottom: 300px;
}
.ivu-col {
  transition: width 0.2s ease-in-out;
}
.ivu-col-span-5 {
  display: block;
  width: 12.833333%;
}
</style>